
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
html,body,section{
    width: 100%;
    height:100%;

    /*超出屏幕的部分隐藏*/
    overflow: hidden;

}
section{
    position: relative;
}
/*每个屏幕的背景*/
section.p1{
    background: url(../images/page1_glow.png) no-repeat center -60px, linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
;
}
section.p2{
    background: linear-gradient(0deg, #41b93e 0%, #3b9e3c 35%, #274535 75%, #190530 100%);
}
section.p3{
    background: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
}
section.p4{
    background: url(../images/page4_glow.png) no-repeat center 200px, linear-gradient(0deg, #ff9f42 0%, #ed923d 35%, #6d3816 75%, #2e0b04 100%);
}
section.p5{
    background: url(../images/page5_glow.png) no-repeat center -300px,linear-gradient(0deg, #d74d53 0%, #c44655 35%, #4c184c 75%, #110145 100%);
}

/*除第一屏外的其他屏的头部*/
.header-left{
    position: fixed;
    top: 0;
    left: 0;
}
.header-left img{
    margin:40px 100px 0 20px;
}
.header-left a{
    padding:6px 18px;
    font-size:16px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 20px;
}
/*gps*/
.gps{
    position: fixed;
    top:50%;
    right: 30px;
    margin-top:-5%;
}
.gps li{
    margin-top:18px;
    list-style: none;
    width:14px;
    height:14px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.6);
}
.gps li.current{
    background-color:#fff;
}

/*页脚*/
footer{
    position: fixed;
    bottom:20px;
    left: 0;
    width: 100%;
    color: #fff;
}
footer>span{
    float: left;
    margin-left:20px;
    font-weight: bold;;
}
footer>ul{
    float: right;
}
footer>ul>li{
    margin-right:20px;
    float: left;
    list-style: none;
}
footer ul li>a{

    text-decoration: none;
    color: #fff;
}

/*指示器*/
.scroll{
    position: fixed;
    bottom:20px;
    left: 50%;
    animation:Scroll 0.6s linear infinite alternate;
}
@keyframes Scroll {
    from{
        transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(20px) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
    }
}

/*****************************第一屏************************/
section.p1 .p1-header{
    width: 500px;
    height: 140px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left:-250px;

    display: flex;
    justify-content: center;
    align-items: center;
}
section.p1 .p1-header img{
    width: 300px;
    margin-right:50px;
}
section.p1 .p1-header a{
    padding:10px 20px;
    font-size:16px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 20px;
}
section.p1 .p1-header a:hover{
    background-color: #fff;
    color: #000;
}

section.p1>.p1-main,
section.p1>.p1-main>ul
{
    width: 600px;
    height: 600px;
    /*background-color: red;*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-300px;
    margin-top:-300px;

    perspective: 1000px;

}
section.p1>.p1-main>ul{
    animation:p1-main 20s infinite alternate;
    transform-style: preserve-3d;
}

section.p1>.p1-main>ul>li{
    width: 580px;
    height: 360px;
    list-style:none;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-290px;
    margin-top:-180px;

    /*元素的背面是不可见的*/
    backface-visibility: hidden;
}

@keyframes p1-main{
    from{
        transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(20px) translateZ(0) rotateX(0) rotateY(360deg) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
    }
}

section.p1>.p1-main>ul>li:nth-child(1){
    transform: translateX(0) translateY(0px) translateZ(0) rotateX(0) rotateY(0deg) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
section.p1>.p1-main>ul>li:nth-child(2){
    transform: translateX(0) translateY(0) translateZ(60px) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
section.p1>.p1-main>ul>li:nth-child(3){
    transform: translateX(0) translateY(0px) translateZ(60px) rotateX(0) rotateY(180deg) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);

}
section.p1>.p1-main>ul>li:nth-child(4){
    transform: translateX(0) translateY(0px) translateZ(0) rotateX(0) rotateY(180deg) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
section.p1>.p1-main>ul>li:nth-child(5){
    transform: translateX(0) translateY(0px) translateZ(-60px) rotateX(0) rotateY(180deg) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}

section.p1>.p1-round{
    width: 680px;
    height: 680px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -340px;
    margin-left:-340px;

    /*3D和透视*/
    transform-style: preserve-3d;
    perspective: 1000px;

    animation:p1-round 3s linear infinite;
}

@keyframes p1-round{
    /*rotateZ(0-360deg)顺时针转动，
    *rotateX(60deg)右上角，
    *rotateY(-10deg)左下角，
    *加了有内近外远的效果（透视）
    *理解rotateX，rotateY,rotateZ的区别？？？？？
    */
    from{
        transform: translateX(0) translateY(0) translateZ(0) rotateX(60deg) rotateY(-10deg) rotateZ(0) scaleX(1.5) scaleY(1.5) scaleZ(1.5);
    }
    to{
        transform: translateX(0) translateY(0px) translateZ(0) rotateX(60deg) rotateY(-10deg) rotateZ(360deg) scaleX(1.5) scaleY(1.5) scaleZ(1.5);
    }
}

/*****************************第二屏************************/
section.p2{
    perspective: 1000px;
}
section.p2>.p2-title{
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top:-47px;
    z-index: 2;
    transition:all 2s linear;
}
section.p2>.p2-title>p{
    color: #fff;
}
section.p2>.p2-bg{
    width: 100%;
    height: 1px;
    background-color: greenyellow;
    position: absolute;
    top: 50%;
    left: 0;
}
section.p2>.p2-bg>img:nth-child(1){
    width: 684px;
    height: 395px;
    position: absolute;
    top: -198px;
    left: 52%;
}
section.p2>.p2-bg>img:nth-child(2){
    width: 346px;
    height: 123px;
    position: absolute;
    top: -60px;
    left: 60%;
}
section.p2>.p2-mian{
    width: 600px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -300px;
    transition:all 2s linear;
}
section.p2>.p2-mian>ul>li{
    width: 350px;
    height: 350px;
    position: absolute;
    top:50%;
    margin-top: -172px;
    list-style: none;
}
section.p2>.p2-mian>ul>li:nth-child(1){
    left:340px;
    animation: p2-mian 2s infinite linear;
}
section.p2>.p2-mian>ul>li:nth-child(2){
    left:260px;
    animation: p2-mian 3s infinite linear;
}
section.p2>.p2-mian>ul>li:nth-child(3){
    left:120px;
    animation: p2-mian 1s infinite linear;
}
section.p2>.p2-mian>ul>li:nth-child(4){
    left:00px;
    animation: p2-mian 3s infinite linear;
}
@keyframes p2-mian{
    from{
        transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(0px) translateZ(0) rotateX(0) rotateY(0) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
/*实现落空类*/
.p2.current>.p2-mian,
.p2.current>.p2-title{
    transform: translateX(0) translateY(0px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(3) scaleY(3) scaleZ(3);
}

/*****************************第三屏************************/
section.p3{
    perspective: 1000px;
}
section.p3>.p3-title{
    position: absolute;
    top: 50%;
    right:10%;
    margin-top:-95px;
    transform: translateX(50px) translateY(-40px) translateZ(0px) rotateX(10deg) rotateY(-30deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    transition:all 1s linear;
}
section.p3>.p3-bg>ul>li:nth-child(1)>img{
    position: absolute;
    top: 50%;
    left:50%;
    margin-left: -694px;
    margin-top: -545px;
}
section.p3>.p3-bg>ul>li:nth-child(2)>img{
    position: absolute;
    top: 50%;
    left:50%;
    margin-left: -65px;
    margin-top: -65px;
}
section.p3>.p3-mian{
    width: 600px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -300px;
    transition:all 1s linear;
}
section.p3>.p3-mian>ul{
    width: 680px;
    height: 680px;
    transform-style: preserve-3d;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -340px;
    margin-top: -340px;
}
section.p3>.p3-mian>ul>li{
    width: 680px;
    height: 680px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -340px;
    margin-left: -340px;
    border: 2px solid #5ec0ff;
    border-radius:50%;
    list-style: none;
}

section.p3>.p3-mian>ul>li>img{
    animation: p3-round 3s infinite linear;
}
section.p3>.p3-mian>ul>li:nth-child(1){
    animation: p3-mian1 10s infinite linear;
}
section.p3>.p3-mian>ul>li:nth-child(2){
    animation: p3-mian2 10s infinite linear;
}
section.p3>.p3-mian>ul>li:nth-child(3){
    animation: p3-mian3 10s infinite linear;
}
@keyframes p3-mian1{
    from{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(75deg) rotateY(-60deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(75deg) rotateY(300deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p3-mian2{
    from{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(75deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(75deg) rotateY(360deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p3-mian3{
    from{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(75deg) rotateY(60deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(75deg) rotateY(420deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p3-round{
    from{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
/*落空类*/
.p3.current>.p3-mian{
    transform: translateX(0) translateY(0px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(3) scaleY(3) scaleZ(3);
}
.p3.current>.p3-title{
    transform: translateX(800px) translateY(0px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(3) scaleY(3) scaleZ(3);
}

/*****************************第四屏************************/
section.p4{
    perspective: 1000px;
}
section.p4>.p4-title{
    position: absolute;
    right: 10%;
    top: 50%;
    margin-left: -150px;
    margin-top: -95px;
    transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(30deg) rotateY(0) rotateZ(0) scaleX(1.2) scaleY(1.2) scaleZ(1.2);
    transition:all 1.5s linear;
}
section.p4>.p4-line{
    width:100%;
    height: 250px;
    position: absolute;
    top: 52%;
    left: 0;
    border: 1px solid #fff;
}
section.p4>.p4-line>img:nth-child(1){
    width: 346px;
    height: 123px;
    position: absolute;
    top: -25%;
    left: 0;
    animation:p4-line1 0.7s infinite linear;
}
section.p4>.p4-line>img:nth-child(2){
    width: 346px;
    height: 123px;
    position: absolute;
    top: 75%;
    left: 0;
    animation:p4-line1 0.5s infinite linear;
}
section.p4>.p4-bg{
    position: absolute;
    top: 40%;
    left: 14%;
    transition:all 1.5s linear;
}
section.p4>.p4-bg>p{
    color: #fff;
}
section.p4>.p4-mian{
    width: 600px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    transition:all 1s linear;
}
section.p4>.p4-mian>ul>li{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -204px;
    margin-left: -204px;
}

section.p4>.p4-mian>ul>li:nth-child(1){
 animation:p4-mian1 40s infinite linear;
}
section.p4>.p4-mian>ul>li:nth-child(2){
    animation:p4-mian2 14s infinite linear;
}
section.p4>.p4-mian>ul>li:nth-child(3){
    animation:p4-mian3 3s infinite linear;
}
section.p4>.p4-mian>ul>li:nth-child(4){
    animation:p4-mian4 3s infinite linear;
}
section.p4>.p4-mian>ul>li:nth-child(5){
    animation:p4-mian5 2s infinite linear;
}
@keyframes p4-mian1{
    from{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p4-mian2{
    from{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p4-mian3{
    from{
        transform: translateX(0) translateY(80px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(80px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p4-mian4{
    from{
        transform: translateX(0px) translateY(40px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0px) translateY(40px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p4-mian5{
    from{
        transform: translateX(0) translateY(-20px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to{
        transform: translateX(0) translateY(-20px) translateZ(0px) rotateX(-50deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p4-line1 {
    from {
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(00deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to {
        transform: translateX(300%) translateY(0px) translateZ(0px) rotateX(00deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}
@keyframes p4-line2 {
    from {
        transform: translateX(0) translateY(0px) translateZ(0px) rotateX(00deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
    to {
        transform: translateX(300%) translateY(0px) translateZ(0px) rotateX(00deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
    }
}

/*落空类、*/
.p4.current>.p4-mian{
    transform: translateX(0) translateY(0px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(3) scaleY(3) scaleZ(3);
}
.p4.current>.p4-title{
    transform: translateX(800px) translateY(0px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(3) scaleY(3) scaleZ(3);
}
.p4.current>.p4-bg{
    transform: translateX(-800px) translateY(0px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(3) scaleY(3) scaleZ(3);
}

/*****************************第五屏************************/

section.p5>.p5-bg{
    position: absolute;
    top: 44%;
    left: 15%;
    color:#fff;
    transition:all 1s linear;
    transform-origin: right center;
}
section.p5>.p5-title{
    position: absolute;
    top:44%;
    right:0;
    transition:all 1s linear;
    transform-origin: right center;
}
section.p5>.p5-mian{
    width: 600px;
    height: 600px;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -300px;
}
section.p5>.p5-mian>ul>li{
    position: absolute;
    top: 50%;
    left: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

}
section.p5>.p5-mian>ul>li:nth-child(1){
    width: 305px;
    height: 305px;
    background: url("../images/page5_bubble.png") no-repeat;
    margin-left: -152px;
    margin-top: -152px;
    transition:all 1s linear;
}
section.p5>.p5-mian>ul>li:nth-child(2){
    width: 210px;
    height: 210px;
    background: url("../images/page5_bubble.png") no-repeat;
    margin-left: -270px;
    margin-top: -244px;
    background-size:cover;
    transition:all 1s linear;
}
section.p5>.p5-mian>ul>li:nth-child(3){
    width: 250px;
    height: 250px;
    background: url("../images/page5_bubble.png") no-repeat;
    margin-left: -328px;
    margin-top: 52px;
    background-size:cover;
    transition:all 1s linear;
}
section.p5>.p5-mian>ul>li:nth-child(4){
    width: 188px;
    height: 180px;
    background: url("../images/page5_bubble.png") no-repeat;
    margin-left: 155px;
    margin-top: 50px;
    background-size:cover;
    transition:all 1s linear;
}
section.p5>.p5-mian>ul>li:nth-child(5){
    width: 120px;
    height: 120px;
    background: url("../images/page5_bubble.png") no-repeat;
    margin-left: 142px;
    margin-top: -192px;
    background-size:cover;
    transition:all 1s linear;
}
section.p5>.p5-mian>ul>li:nth-child(6){
    width: 85px;
    height: 85px;
    background: url("../images/page5_bubble.png") no-repeat;
    margin-left: 245px;
    margin-top: -118px;
    background-size:cover;
    transition:all 1s linear;
}

/*落空类*/
.p5.current>.p5-mian>ul>li:nth-child(1){
    transform: translateX(-800px) translateY(0px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
.p5.current>.p5-mian>ul>li:nth-child(2){
    transform: translateX(-800px) translateY(-300px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
.p5.current>.p5-mian>ul>li:nth-child(3){
    transform: translateX(-800px) translateY(300px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
.p5.current>.p5-mian>ul>li:nth-child(4){
    transform: translateX(800px) translateY(-300px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
.p5.current>.p5-mian>ul>li:nth-child(5){
    transform: translateX(800px) translateY(0px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
.p5.current>.p5-mian>ul>li:nth-child(6){
    transform: translateX(800px) translateY(300px) translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}
.p5.current>.p5-title,
.p5.current>.p5-bg{
    transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0) rotateY(-90deg) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
}


